<template>
  <div>
    <q-table
      class="bg-white shadow-1"
      :data="dataTab"
      dense
      :columns="columns"
      row-key="id"
      separator="cell"
      selection="single"
      :selected.sync="selectedTab"
      :visible-columns="visibleColumns"
      :filter="searchForm"
      :pagination.sync="pagination"
      :rows-per-page-options="[3, 5, 10, 20]"
      no-data-label="暂无数据"
      table-class="h-custom"
    >
      <template v-slot:top-left="props">
        <!-- <q-btn size="sm" color="light-blue" :label="$t('新增')" @click="add"/> -->
        <!-- <q-btn size="sm" color="negative" :label="$t('删除')" class="q-ml-sm"/> -->
      </template>
      <template v-slot:top-right="props">
        <q-select
          v-model="visibleColumns"
          multiple
          borderless
          options-dense
          :display-value="$t('显示列')"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          class="q-mx-lg"
        >
          <template v-slot:option="scope">
            <q-item
              v-bind="scope.itemProps"
              v-on="scope.itemEvents"
              v-if="!scope.opt.required"
            >
              <q-item-section avatar>
                <q-toggle color="blue" v-model="visibleColumns" :val="scope.opt.name" />
              </q-item-section>
              <q-item-section style="min-width:60px">
                {{ scope.opt.label }}
              </q-item-section>
            </q-item>
          </template>
        </q-select>
        <q-toggle
          v-model="searchToggle"
          left-label
          label="搜索"
          color="blue"
          checked-icon="check"
          unchecked-icon="clear"
          keep-color
        />
        <q-btn
          flat round dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          class="q-ml-md"
        />
      </template>
      <template v-if="searchToggle" v-slot:top-row="props">
        <q-tr :props="props">
          <q-td>
            <q-btn color="primary" dense flat icon="search" @click="listGet({ pagination: pagination, filter: searchForm })"/>
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
            <!-- <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'"/> -->
            <q-input dense outlined v-model="searchForm[col.name]"/>
          </q-td>
        </q-tr>
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th>
            <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
          </q-th>
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
           <q-td width="56">
            <q-checkbox  dense v-model="props.selected" />
          </q-td>
          <q-td key="siteName" :props="props">{{ props.row.siteName }}</q-td>
          <q-td key="siteCode" :props="props">{{ props.row.siteCode }}</q-td>
          <q-td key="groupName" :props="props">{{ props.row.groupName }}</q-td>
          <q-td key="typeName" :props="props">{{ props.row.typeName }}</q-td>
          <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
        </q-tr>
        <q-tr v-show="props.expand" :props="props">
          <q-td colspan="100%">
          </q-td>
        </q-tr>
      </template>
      <template v-slot:pagination="props">
        <q-pagination
          v-model="pagination.page"
          color="blue"
          :max-pages="5"
          :max="pages"
          :boundaryLinks="true"
          :directionLinks="true"
        />
        共 {{ total }} 条
      </template>
    </q-table>
  </div>
</template>

<script>
// import { transformToTreeFormat } from 'src/utils/fns'
export default {
  props: {
    url: {},
    value: {},
    id: {}
  },
  data () {
    return {
      classificationdata: [],
      splitterModel: 20,
      caTab: 'tab1',
      TaTab: 'tab1',
      data: [],
      ticked: [],
      filter: '',
      tickStrategy: 'strict',
      selected: '',
      nodeExpand: [],
      nodeSelected: '',
      searchToggle: false,
      searchForm: {
        siteName: '',
        siteCode: '',
        groupName: '',
        typeName: '',
        createTime: ''
      },
      selectedTab: [],
      visibleColumns: [
        'siteName',
        'siteCode',
        'groupName',
        'typeName',
        'createTime'
      ],
      tab: '',
      // 当加入 required: true 属性时  visibleColumns 对当前字段无效
      columns: [
        { name: 'siteName', required: true, label: '地点名称', align: 'left', field: 'siteName', sortable: true },
        { name: 'siteCode', required: true, label: '地点编码', align: 'left', field: 'siteCode', sortable: true },
        { name: 'groupName', required: true, label: '品项组', align: 'left', field: 'groupName', sortable: true },
        { name: 'typeName', required: true, label: '品项类型', align: 'left', field: 'typeName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataTab: [],
      total: 0,
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      }
    }
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pagination.rowsPerPage)
    }
  },
  watch: {
    'pagination.page' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    'selectedTab': {
      handler () {
        this.$emit('select', this.selectedTab)
      },
      deep: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: this.url,
        params: {
          itemId: this.id,
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          ...filter,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : '')
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          console.log(this.value)
          data.list.forEach(item => {
            if (item.id === this.value) {
              this.selectedTab.push(item)
            }
          })
          this.total = data.total
          this.dataTab = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
